<template>
  <div>
    <!--条形图-->
    <div id="lineChart" ref="lineChart"></div>

    <!--柱状图-->
    <div id="barChart" ref="barChart"></div>
  </div>
</template>

<script>
// 引入完整的echarts
import echarts from "echarts";
export default {
  name: "Charts",

  data() {
    return {};
  },
  mounted() {
    // 调用绘制图表的方法
    this.drawlineChart();
    this.drawBarChart();
  },
  methods: {
    /**
     * 绘制折线图
     * */
    drawlineChart() {
      var lineChart = echarts.init(this.$refs.lineChart);
      var color = ["#1a9bfc", "#99da69", "#e32f46"];
      var name = ["Full station", "Tarer truck", "Full Depot"];
      var data = [
        [36, 26, 33, 43, 36, 45, 40],
        [34, 74, 37, 35, 61, 37, 33],
        [61, 35, 37, 14, 32, 49, 47]
      ];

      var series = [];
      for (var i = 0; i < 3; i++) {
        series.push({
          name: name[i],
          type: "line",
          symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
          symbol: "circle", //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          smooth: true, //是否平滑曲线显示
          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: color[i]
                  },
                  {
                    offset: 0.8,
                    color: "rgba(255,255,255,0)"
                  }
                ],
                false
              ),
              shadowBlur: 10,
              opacity: 0.3
            }
          },
          itemStyle: {
            normal: {
              color: color[i],
              lineStyle: {
                width: 1,
                type: "solid" //'dotted'虚线 'solid'实线
              },
              borderColor: color[i], //图形的描边颜色。支持的格式同 color
              borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
              barBorderRadius: 0,
              label: {
                show: false
              },
              opacity: 0.5
            }
          },
          data: data[i]
        });
      }

      const option = {
        backgroundColor: "#2C456D",
        legend: {
          top: 20,
          itemGap: 5,
          itemWidth: 5,
          textStyle: {
            color: "#fff",
            fontSize: "10"
          },
          data: name
        },
        title: {
          text: "电压曲线",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "normal"
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16"
          },
          top: "3%",
          left: "3%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: "#57617B"
            }
          },
          formatter:
            "{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />",
          backgroundColor: "rgba(0,0,0,0.7)", // 背景
          padding: [8, 10], //内边距
          extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);" //添加阴影
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "5%",
          bottom: "12%"
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#32346c"
              }
            },
            boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
            axisLabel: {
              inside: false,
              textStyle: {
                color: "#bac0c0",
                fontWeight: "normal",
                fontSize: "12"
              }
            },
            data: [
              "2019-11-1",
              "2019-11-2",
              "2019-11-3",
              "2019-11-4",
              "2019-11-5",
              "2019-11-6",
              "2019-11-7"
            ]
          }
        ],
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#32346c"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#32346c"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#bac0c0",
              fontWeight: "normal",
              fontSize: "12"
            },
            formatter: "{value}%"
          }
        },
        series: series
      };

      lineChart.setOption(option);
    },

    /**
     * 绘制柱状图
     * */
    drawBarChart() {
      var colorArr = [
        "#2A5FD1",
        "#49CD5A",
        "#E66548",
        "#2A5FD1",
        "#2A5FD1",
        "#2A5FD1",
        "#2A5FD1",
        "#2A5FD1",
        "#2A5FD1",
        "#2A5FD1"
      ];
      // 实例化echarts对象
      var barChart = echarts.init(this.$refs.barChart);
      var name = ["Full station", "Tarer truck", "Full Depot"];
      var data = [86, 22, 58, 84, 42, 50, 84, 42, 50, 56];

      // 配置参数
      const option = {
        color: colorArr,
        backgroundColor: "#18163B",
        title: {
          text: "各模块耗电量(measure)",
          textStyle: {
            align: "left",
            color: "#fff",
            fontSize: 14
          },
          top: "3%",
          left: "3%"
        },

        legend: {
          top: 20,
          itemGap: 5,
          itemWidth: 5,
          textStyle: {
            color: "#fff",
            fontSize: "10"
          },
          data: name
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "5%",
          bottom: "12%"
        },
        xAxis: [
          {
            type: "category",
            color: "#59588D",
            data: [
              "Top1",
              "Top2",
              "Top3",
              "Top4",
              "Top5",
              "Top6",
              "Top7",
              "Top8",
              "Top9",
              "Top10"
            ],
            axisPointer: {
              type: "line"
            },
            axisLine: {
              lineStyle: {
                color: "#272456"
              }
            },
            axisLabel: {
              margin: 20,
              color: "#59588D",
              textStyle: {
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [
          {
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value}%",
              color: "#59588D"
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "#272456"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            name: function(params) {
              return name[params.dataIndex];
            },
            data: data,
            barWidth: "20px",
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorArr[params.dataIndex];
                },
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //   offset: 0,
                //   color: '#41E1D4' // 0% 处的颜色
                // }, {
                //   offset: 1,
                //   color: '#10A7DB' // 100% 处的颜色
                // }], false),
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: "rgba(0,255,225,1)",
                shadowBlur: 4
              }
            },
            label: {
              normal: {
                //show: true,
                lineHeight: 30,
                width: 80,
                height: 30,
                backgroundColor: "#252453",
                borderRadius: 200,
                position: ["-8", "-60"],
                distance: 1,
                formatter: ["    {d|●}", " {a|{c}%}     \n", "    {b|}"].join(
                  ","
                ),
                rich: {
                  d: {
                    color: "#3CDDCF"
                  },
                  a: {
                    color: "#fff",
                    align: "center"
                  },
                  b: {
                    width: 1,
                    height: 30,
                    borderWidth: 1,
                    borderColor: "#234e6c",
                    align: "left"
                  }
                }
              }
            }
          }
        ]
      };

      barChart.setOption(option);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#barChart {
  width: 95%;
  height: 500px;
  margin: 20px auto;
  border: 1px solid #ccc;
  background: linear-gradient(
    -51deg,
    rgba(50, 88, 152, 1),
    rgba(16, 37, 92, 1)
  );
}

#lineChart {
  width: 95%;
  height: 500px;
  margin: 20px auto;
  border: 1px solid #ccc;
  background: linear-gradient(
    -51deg,
    rgba(50, 88, 152, 1),
    rgba(16, 37, 92, 1)
  );
}
</style>
